/*
1.新建tsconfig.json
  // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
  "include": [
    "src/xx/x", // 匹配src/xx/x目录下的所有ts文件
  ],

2.npm init -y 生成package.json

3.新建webpack.config.js

4.npm i webpack webpack-cli -D

5.npm i webpack-dev-server -D

6.package.json中设置打包命令和启动命令
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

7.webpack.config.js中设置
  const { Configuration } = require("webpack")
  const path = require("node:path")

  // @type {Configuration}


  const config = {
    mode: "development", // 开发模式
    entry: "./src/main.ts", // 入口文件
    output: {
      path: path.resolve(__dirname, "dist"), // 输出文件夹
      filename: "bundle.js", // 打包之后的文件  输出文件名
    },
  }

  module.exports = config

8.npm i ts-loader -D  // 处理ts文件

9.npm i typescript -D // 编译ts文件

10.webpack.config.js中设置
  module: {
    rules: [
      {
        test: /.ts$/, // 匹配的文件类型
        use: "ts-loader", // 解析ts文件 loader
        // exclude: /node_modules/, // 不处理node_modules文件夹下的文件
        // options: {
        //   transpileOnly: true // 只编译不转换
        // }
      }
    ]
  }

11.查看Vue版本 npm list vue
  查看vue脚手架版本 vue -V 或者 Vue -V 或者 vue/Vue --version
  如果版本为空，则npm i vue -D

12.index.html中
  添加挂载点  id="app"
  引入bundle.js

13.main.ts中
  import { createApp } from "Vue"
  import App from "./App"

  createApp(App).mount("#app")

14.npm i html-webpack-plugin -D // 处理html文件

15.webpack.config.js中设置
  plugins: [
    // webpack的插件都是class 都需要new
    new HtmlWebpackPlugin({
      template: "./src/index.html", // 模板文件
    })
  ],

16.npm i vue-loader -D // 处理vue文件

17.ERROR in G:\xampp\htdocs\code\type-script\src\main.ts(7,17)
  TS2307: Cannot find module './App.vue' or its corresponding type declarations.

  在shim.d.ts中添加定义
  declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
  }

18.ERROR in ./src/App.vue
  Module Error (from ./node_modules/vue-loader/dist/index.js):
  vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

  在webpack.config.js中添加
  const { VueLoaderPlugin } = require("vue-loader")

  plugins: [
    new VueLoaderPlugin()
  ],

19.ERROR in Error: Child compilation failed:
  Module not found: Error: Can't resolve 'G:\xampp\htdocs\code\type-script\src\index.html' in 'G:\xampp\htdocs\code\type-script'
  ModuleNotFoundError: Module not found: Error: Can't resolve 'G:\xampp\htdocs\code\type-script\src\index.html' in 'G:\xampp\htdocs\code\type-script'

  在webpack.config.js中检查插件模板的文件路径是否正确

20..vue文件中也需要处理ts语法
  故也要在webpack.config.js中设置ts-loader
  https://www.npmjs.com/package/ts-loader#appendtssuffixto

  在webpack.config.js中添加
  {
    test: /\.ts$/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  }

21.在webpack.config.js中添加
  stats: "errors-only", // 打包过程中只显示错误信息

22.css文件处理
  npm i css-loader style-loader -D

  在webpack.config.js中添加
  {
    test: /\.css$/,
    use: ["style-loader", "css-loader"] // 从右往左的规则，然后js动态插入style标签
  }

23.less文件处理
  npm i less less-loader -D

  在webpack.config.js中添加
  {
    test: /\.less$/,
    use: ["style-loader", "css-loader", "less-loader"]
  }

24.处理日期格式化
  npm i moment -D

25.js分包
  https://www.webpackjs.com/plugins/split-chunks-plugin/

  在webpack.config.js中添加
  optimization: {
    splitChunks: {
      cacheGroups: {
        moment: {
          name: "moment",
          chunks: "all",
          test: /[\\/]node_modules[\\/]moment[\\/]/,
        },
        common: {
          name: "common",
          chunks: "all",
          minChunks: 2  // 文件被引用的次数最少为2次
        }
      }
    }
  }

  [webpack-dev-middleware] Error: Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks main and moment)

  在webpack.config.js中添加
  filename: "[chunkhash].js",
  clean: true

26.单独提取css
  目前是通过js动态插入style标签的方式进行的，但是我们希望通过link标签引入
  npm install mini-css-extract-plugin -D

  在webpack.config.js中添加
  const CssExtractPlugin = require("mini-css-extract-plugin")

  plugins: [
    new CssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [CssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/,
        use: [CssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  },
*/
